<template>
  <div class="chat-container">
    <!-- 头部区域 -->
    <header class="chat-header">
      <button class="back-btn" @click="goBack">&lt;</button>
      <h1 class="chat-title">{{ `AI助手(${isshengdu})` }}</h1>
    </header>

    <!-- 聊天消息区域 -->
    <main class="chat-messages">
      <div class="message" v-for="msg in messages" :key="msg.id"
        :class="msg.sender === 'user' ? 'user-message' : 'ai-message'">
        <div class="avatar">{{ msg.sender === 'ai' ? 'AI' : 'You' }}</div>
       <div class="message-container">
        <div v-if="msg.reasoning_content" class="message-reasoning-content">
          {{ msg.reasoning_content }}
        </div>
        <div class="message-content">
          {{ msg.content }}
        </div>
       </div>
      </div>
    </main>

    <!-- 底部输入区域 -->
    <footer class="chat-input-area">
      <textarea v-model="inputMessage" class="message-input" placeholder="请输入消息..."
        @keydown.enter.prevent="sendMessage"></textarea>
      <button class="send-btn" @click="sendMessage">发送</button>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { callDeepSeekAPI } from '../../api/deepseekApi.js';

const router = useRouter();
const messages = ref([
  { id: 1, sender: 'ai', content: '您好！有什么我可以帮助您的吗？' }
]);
const inputMessage = ref('');
const isshengdu = router.currentRoute.value.query.isshengdu === '1' ? '深度思考' : '普通';

const goBack = () => {
  router.go(-1);
};

const sendMessage = async () => {
  // 发送消息
  const userMessage = inputMessage.value.trim();//去除空格
  // 检查输入
  if (userMessage) {
    messages.value.push({
      id: Date.now(),
      sender: 'user',
      content: userMessage
    });

    inputMessage.value = ''; // 清空输入框
    if(router.currentRoute.value.query.isshengdu !=='1'){
      callDeepSeekAPI([{ role: 'user', content: userMessage }]).then((ref) => {
        console.log(ref.choices[0].message.content);
        messages.value.push({
          id: Date.now() + 1,
          sender: 'ai',
          content: ref.choices[0].message.content
        });
      })
    }else{
      callDeepSeekAPI([{ role: 'user', content: userMessage }],'deepseek-reasoner',false).then((ref) => {
        console.log(ref.choices[0].message.content);
        messages.value.push({
          id: Date.now() + 1,
          sender: 'ai',
          content: ref.choices[0].message.content,
          reasoning_content: ref.choices[0].message.reasoning_content
        });
      })
    }
    
    // messages.value.push({
    //   id: Date.now() + 1,
    //   sender: 'ai',
    //   content: res.choices[0].message.content
    // });
  }
};


onMounted(() => {

  // 获取路由参数
  const query = router.currentRoute.value.query;
  if (query.msg) {
    messages.value.push({
      id: Date.now(),
      sender: 'user',
      content: query.msg
    });
    // 调用deeppseekk API接口
    if(query.isshengdu !=='1'){
      callDeepSeekAPI([{ role: 'user', content: query.msg }]).then((ref) => {
        console.log(ref.choices[0].message.content);
        messages.value.push({
          id: Date.now() + 1,
          sender: 'ai',
          content: ref.choices[0].message.content
        });
      })
    }else{
      callDeepSeekAPI([{ role: 'user', content: query.msg }],'deepseek-reasoner',false).then((ref) => {
        console.log(ref.choices[0].message.content);
        messages.value.push({
          id: Date.now() + 1,
          sender: 'ai',
          content: ref.choices[0].message.content,
          reasoning_content: ref.choices[0].message.reasoning_content
        });
      })
    }
  }
});
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
}

.back-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  margin-right: 16px;
  padding: 4px 8px;
}

.chat-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background-color: #f9f9f9;
}

.message {
  display: flex;
  margin-bottom: 16px;
}

.ai-message {
  align-self: flex-start;
}

.user-message {
  align-self: flex-end;
}

.user-message {
  align-self: flex-end;
  flex-direction: row-reverse;
}


.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  font-size: 14px;
  flex-shrink: 0;
}

.user-message .avatar {
  margin-right: 0;
  margin-left: 8px;
}

.message-content {
  padding: 10px 14px;
  border-radius: 18px;
  background-color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-message .message-content {
  background-color: #007bff;
  color: white;
}

.chat-input-area {
  display: flex;
  padding: 16px;
  border-top: 1px solid #e5e5e5;
  background-color: white;
}

.message-input {
  flex: 1;
  border: 1px solid #e5e5e5;
  border-radius: 24px;
  padding: 12px 16px;
  resize: none;
  outline: none;
  font-size: 14px;
  height: 48px;
  max-height: 120px;
}

.send-btn {
  margin-left: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.message-reasoning-content{
  padding: 8px 12px;
  border-radius: 12px;
  background-color: #f0f0f0;
  font-style: italic;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}
</style>
